<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
选择不同的颜色切换对应背景色
-->

<table align="center" border="1px" width="800px">
    <tr>
        <td><input name="s1" type="radio" value="红色" onclick="dianJi()">红色</td>
        <td><input name="s1" type="radio" value="橙色" onclick="dianJi()">橙色</td>
        <td><input name="s1" type="radio" value="黄色" onclick="dianJi()">黄色</td>
        <td><input name="s1" type="radio" value="绿色" onclick="dianJi()">绿色</td>
    </tr>
    <tr>
        <td><input name="s1" type="radio" value="青色" onclick="dianJi()">青色</td>
        <td><input name="s1" type="radio" value="蓝色" onclick="dianJi()">蓝色</td>
        <td><input name="s1" type="radio" value="紫色" onclick="dianJi()">紫色</td>
        <td><input name="s1" type="radio" value="黑色" onclick="dianJi()">黑色</td>
    </tr>

</table>


</body>


<script>


    function dianJi() {
        var obj = document.getElementsByName("s1");
        var flags = false;
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked == true) {
                if (obj[i].getAttribute("value") == "红色"){
                    document.body.style.background="red"
                }else if (obj[i].getAttribute("value") == "橙色"){
                    document.body.style.background="orange"
                }else if (obj[i].getAttribute("value") == "黄色"){
                    document.body.style.background="huang"
                }else if (obj[i].getAttribute("value") == "绿色"){
                    document.body.style.background="green"
                }else if (obj[i].getAttribute("value") == "青色"){
                    document.body.style.background="qing"
                }else if (obj[i].getAttribute("value") == "蓝色"){
                    document.body.style.background="blue"
                }else if (obj[i].getAttribute("value") == "紫色"){
                    document.body.style.background="The purple"
                }else if (obj[i].getAttribute("value") == "黑色"){
                    document.body.style.background="black"
                }
                break;
            }
        }
    }


</script>
</html>